
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import Swiper from './components/swiper.vue'
import { fetchGetNotificationList } from '@/api/notification';
import { filterDate } from '@/utils/format';
import type { FormInstance, FormRules } from "element-plus";
import { useUserStore } from '@/store/modules/user';
import { fetchPostSuggestion } from '@/api/message'


let notificationList = reactive([])
const getNotificationList = async () => {
  const res = await fetchGetNotificationList({ pageSize: 5 })
  res.data.data.forEach((item: any) => notificationList.push(item))
}
onMounted(() => {
  getNotificationList()
})

// 点击留言
const handleSuggestion = () => {
  showInfoDialog.value = true
}
let showInfoDialog = ref(false); // 是否展示物资信息编辑框
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
  // 重置验证规则
  if (!formEl) return;
  showInfoDialog.value = false
  ruleForm = {
    type: 0,
    title: '', // 名称
    content: "", // 单价
    anonymous: "", // 数量
    stuCode: useUserStore().userInfo.stuCode,
    name: useUserStore().userInfo.name,
  }
  formEl.resetFields();
};
let ruleForm = reactive({
  type: 0,
  title: '', // 名称
  content: "", // 单价
  anonymous: "", // 数量
  stuCode: useUserStore().userInfo.stuCode,
  name: useUserStore().userInfo.name,
});
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  type: [{ required: true, message: "请选择留言类型", trigger: "change" }],
  title: [{ required: true, message: "请输入留言标题", trigger: "change" }],
  content: [{ required: true, message: "请输入留言内容", trigger: "change" }],
  anonymous: [{ required: true, message: "请选择是否匿名", trigger: "change" }],
});

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      fetchPostSuggestion(ruleForm).then((res: { code: number; }) => {
        if (res.code == 200) {
          ElMessage({
            message: '操作成功',
            type: 'success'
          })
        }
        showInfoDialog.value = false
      })
    } else {
      console.log("error submit!", fields);
    }
  })
}
const typeOptions = [
  {
    value: 0,
    label: '活动相关',
  },
  {
    value: 1,
    label: '人员相关',
  },
  {
    value: 2,
    label: '物资相关',
  },
  {
    value: 3,
    label: '规则相关',
  },
  {
    value: 4,
    label: '其他',
  },
]
const anonymousOptions = [
  {
    value: 0,
    label: '不匿名',
  },
  {
    value: 1,
    label: '匿名',
  },
]

// 获取火爆社团列表数据
</script>
<template>
  <div class="student-home-container">
    <div class="top-box">
      <Swiper />
      <div class="ranking-list card-item container">
        <div class="card-header">
          <div class="left-box">
            <svg-icon icon-class="student-hot" class="left-svg" />
            <span class="card-title">火爆社团</span>
          </div>
          <el-tooltip content="更多" effect="customized" placement="top">
            <svg-icon icon-class="student-more" class="right-more" />
          </el-tooltip>
        </div>
        <div class="card-body">
          <div class="card-item">
            <div class="item-title">篮球协会</div>
            <div class="person-num">当前人数：179人</div>
            <div class="hot-box">
              <svg-icon icon-class="student-hot" class="left-svg" />
              <span>热度值：798</span>
            </div>
          </div>
          <div class="card-item">
            <div class="item-title">羽毛球社</div>
            <div class="person-num">当前人数：179人</div>
            <div class="hot-box">
              <svg-icon icon-class="student-hot" class="left-svg" />
              <span>热度值：798</span>
            </div>
          </div>
          <div class="card-item">
            <div class="item-title">志愿者协会</div>
            <div class="person-num">当前人数：179人</div>
            <div class="hot-box">
              <svg-icon icon-class="student-hot" class="left-svg" />
              <span>热度值：798</span>
            </div>
          </div>
          <div class="card-item">
            <div class="item-title">书法协会</div>
            <div class="person-num">当前人数：179人</div>
            <div class="hot-box">
              <svg-icon icon-class="student-hot" class="left-svg" />
              <span>热度值：798</span>
            </div>
          </div>
          <div class="card-item">
            <div class="item-title">轮滑社</div>
            <div class="person-num">当前人数：179人</div>
            <div class="hot-box">
              <svg-icon icon-class="student-hot" class="left-svg" />
              <span>热度值：798</span>
            </div>
          </div>
          <div class="card-item">
            <div class="item-title">动漫社</div>
            <div class="person-num">当前人数：179人</div>
            <div class="hot-box">
              <svg-icon icon-class="student-hot" class="left-svg" />
              <span>热度值：798</span>
            </div>
          </div>
          <div class="card-item">
            <div class="item-title">足球协会</div>
            <div class="person-num">当前人数：179人</div>
            <div class="hot-box">
              <svg-icon icon-class="student-hot" class="left-svg" />
              <span>热度值：798</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="card-item container">
        <div class="card-header">
          <div class="left-box">
            <svg-icon icon-class="student-activity" class="left-svg" />
            <span class="card-title">活动预告</span>
          </div>
          <el-tooltip content="更多" effect="customized" placement="top">
            <svg-icon icon-class="student-more" class="right-more" />
          </el-tooltip>
        </div>
        <div class="card-body">
          <div class="card-item">
            <div class="item-title">诗歌大赛</div>
            <div class="item-score">分值：2.0</div>
            <div class="item-time">发布时间：2022-02-07 00:00:00</div>
          </div>
          <div class="card-item">
            <div class="item-title">校园舞蹈大赛</div>
            <div class="item-score">分值：2.0</div>
            <div class="item-time">发布时间：2022-02-07 00:00:00</div>
          </div>
          <div class="card-item">
            <div class="item-title">象棋比赛</div>
            <div class="item-score">分值：2.0</div>
            <div class="item-time">发布时间：2022-02-07 00:00:00</div>
          </div>
          <div class="card-item">
            <div class="item-title">ACM比赛</div>
            <div class="item-score">分值：2.0</div>
            <div class="item-time">发布时间：2022-02-07 00:00:00</div>
          </div>
          <div class="card-item">
            <div class="item-title">第一节校园歌手大赛</div>
            <div class="item-score">分值：2.0</div>
            <div class="item-time">发布时间：2022-02-07 00:00:00</div>
          </div>
        </div>
      </div>
      <div class="card-item notice-container">
        <div class="card-header">
          <div class="left-box">
            <svg-icon icon-class="student-notice" class="left-svg" />
            <span class="card-title">校内通知</span>
          </div>
          <el-tooltip content="更多" effect="customized" placement="top">
            <svg-icon icon-class="student-more" class="right-more" />
          </el-tooltip>
        </div>
        <div class="card-body">
          <div class="card-item" v-for="(item, index) in notificationList" :key="index">
            <svg-icon icon-class="student-home-top" class="svg-icon" v-if="item.sticky == 1" />
            <div class="item-title">{{ item.title }}</div>
            <div class="item-time">发布时间：{{ filterDate(item.createdAt) }}</div>
          </div>
        </div>
      </div>
      <div class="card-item container">
        <div class="card-header">
          <div class="left-box">
            <svg-icon icon-class="student-share" class="left-svg" />
            <span class="card-title">常用链接</span>
          </div>
          <el-tooltip content="更多" effect="customized" placement="top">
            <svg-icon icon-class="student-more" class="right-more" />
          </el-tooltip>
        </div>
        <div class="feedback-box card-body">
          <div class="public-box flex flex-center">
            <a href="">
              <p>学校教务处</p>
            </a>
            <a href="">
              <p>缴费平台</p>
            </a>
            <a href="">
              <p>西柚官网</p>
            </a>
          </div>
          <div class="feedback" @click="handleSuggestion">
            <svg-icon icon-class="student-feedback" class="feedback-icon" />
            <p>关于社团，有什么想说的，欢迎给团总支留言！</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑弹框 -->
    <div class="el-dialog-25">
      <el-dialog v-model="showInfoDialog" title="新增留言" @close="resetForm(ruleFormRef)">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
          <el-form-item label="留言类型：" prop="type" class="el-form-item-full">
            <el-select v-model="ruleForm.type" class="m-2" placeholder="请选择留言类型">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="留言标题：" prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入留言标题" clearable />
          </el-form-item>
          <el-form-item label="留言内容：" prop="content">
            <el-input v-model="ruleForm.content" placeholder="请输入留言内容" clearable type="textarea" />
          </el-form-item>
          <el-form-item label="是否匿名：" prop="anouymous" class="el-form-item-full">
            <el-select v-model="ruleForm.anonymous" class="m-2" placeholder="请选择是否匿名">
              <el-option v-for="item in anonymousOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm(ruleFormRef)" class="btn-white">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn-green">
              确定
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss">
.student-home-container {
  display: grid;
  gap: 2rem;
  grid-template-rows: 55rem 30rem;
  height: 100%;

  .top-box {
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 1fr;
    height: 100%;
    min-height: 55rem;
  }

  .bottom-box {
    display: grid;
    gap: 2rem;
    height: 100%;
    min-height: 40rem;
    grid-template-columns: repeat(3, 1fr);
  }

  .card-item {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: grid;
    grid-template-rows: 6rem auto;
    position: relative;

    .card-header {
      border-bottom: 1px solid #eee;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding: 0 2rem;

      .left-box {
        align-self: center;
        display: flex;
        align-items: center;

        .left-svg {
          width: 2.5rem;
          height: 2.5rem;
        }

        span {
          color: #303133;
          font-style: italic;
          font-size: 1.6rem;
          font-weight: 700;
          margin-left: 1rem
        }
      }

      .right-more {
        justify-self: right;
        align-self: center;
        color: #064E59;
        width: 2.5rem;
        height: 2.5rem;
        cursor: pointer;
      }
    }

    .card-body {
      padding: 2rem 0;
      display: flex;
      flex-direction: column;

      .card-item {
        display: flex;
        padding: 0 2rem;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #eee;
        cursor: pointer;
        position: relative;

        &:hover {
          background-color: #EBEEF5;
        }

        .item-title {
          font-weight: 700;
          color: #303133;
          font-size: 1.4rem;
          flex: 0.8;
        }

        .item-time {
          color: #999;
        }

        .person-num {
          flex: 0.3;
        }

        .hot-box {
          display: flex;
          width: 12rem;
        }
      }
    }

    .feedback-box {
      display: grid;
      grid-template-rows: repeat(2, 1fr);

      .public-box {
        border-bottom: 1px solid #eee;

        a {
          font-style: italic;
          font-size: 1.8rem;
          font-weight: normal;
          color: #004E5A;
          transition: all 0.3s;

          p {
            margin: 1rem 0.5rem;
          }

          &:hover {
            color: #02899e;
          }
        }
      }

      .feedback {
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;

        &:hover P {
          font-weight: 700;
        }

        .feedback-icon {
          width: 4rem;
          height: 4rem;
        }

        p {
          font-style: italic;
          font-size: 1.8rem;
          font-weight: normal;
          color: #004E5A;
          transition: all 0.3s;
        }
      }
    }
  }
}

.notice-container {
  .card-item {
    display: flex;
    padding: 0 2rem;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #eee;
    cursor: pointer;
    position: relative;

    .svg-icon {
      width: 4rem;
      height: 4rem;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>
